<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--在线引用bootstrap-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" 
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  </head>
<body>
    <div class="container">
      <p class="text-center font-weight-bold">Bilibili大学2020年学生信息收集表</p>
        <table class="table table-striped">
            <thead>
              <tr>
                <th scope="col">序号</th>
                <th scope="col">姓名</th>
                <th scope="col">电话</th>
                <th scope="col">省份</th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
          <div>
            <nav aria-label="Page navigation example">
              <ul class="pagination justify-content-center">
                <li class="page-item" id="pre">
                  <a class="page-link" href="#">上一页</a>
                </li>
                <li class="page-item" id="next">
                  <a class="page-link" href="#">下一页</a>
                </li>
                <li>
                    <div class="alert alert-light" role="alert" id="text">
                    </div>
                </li>
              </ul>

            </nav>
          </div>
          <script>
              var pageno=1;
              var pagesize=5;
              var last;
              //改变table数据的函数
              var initdata=function (student) {
                  var html="";
                  for(var i=0;i<student.length;i++){
                      html+="<tr>";
                      html+="<td>"+student[i].id+"</td>";
                      html+="<td>"+student[i].name+"</td>";
                      html+="<td>"+student[i].tel+"</td>";
                      html+="<td>"+student[i].province+"</td>";
                      html+="</tr>";
                  }
                  $("tbody").append(html);
              }
              //改变页码的函数
              var change=function () {
                    $("#text").text("");
                    var str='当前第'+pageno+'页,'+'共'+last+'页';
                    $("#text").text(str);
              }
              //点击上一页、下一页的点击函数
              var check=function () {
                  $.get("http://localhost:8080/find",{"pageno":pageno,"pagesize":pagesize},function (data) {
                      $("tbody").html("");
                      initdata(data.students);
                  },"json");
              }
              $("#pre a").click(function () {
                      if(pageno>1){
                          pageno=pageno-1;
                          check();
                          change();
                      }
                  });
              $("#next a").click(function () {
                      if(pageno<last){
                          pageno=pageno+1;
                          check();
                          change();
                      }
                  });
              //初始化数据函数
              $(function () {
                $.get("http://localhost:8080/find",{"pageno":pageno,"pagesize":pagesize},function (data) {
                  last=data.totalpage;
                  initdata(data.students);
                  change();
                },"json");
              })
          </script>
    </div>
</body>
</html>